// 详情页的逻辑代码
// 0. 获取元素
const box = document.querySelector('.box')
const paramsBox = document.querySelector('.params')

// 1. 拿到商品 id
const goodsId = window.sessionStorage.getItem('goodsId')
console.log(goodsId)
!goodsId ? window.location.href = './list.html' : getGoodsInfo()

// 2. 发送请求, 请求商品详细数据信息
async function getGoodsInfo() {
  // 2-1. 请求数据
  const res = await pAjax({
    url: 'http://localhost:9999/detail',
    method: 'GET',
    data: { itemId: goodsId ,rewardType:'point'},
    dataType: 'json'
  })

  // 2-2. 判断查询的商品不存在
  // 跳转回到列表页面
  // if (res.code === 2) {
  //   window.location.href = './list.html'
  //   return
  // }

  // console.log(res.info)
  console.log(res)

  // 2-3. 渲染页面
  // box.innerHTML = `
  //   <div class="left">
  //     <img src="${ res.info.img_big_logo }" alt="">
  //   </div>
  //   <div class="right">
  //     <p class="title">
  //       ${ res.info.title }
  //     </p>
  //     <p class="price">
  //       <span class="current">￥${ res.info.current_price }</span>
  //       <span class="old">￥${ res.info.price }</span>
  //     </p>
  //     <p class="number">
  //       <button>-</button>
  //       <input type="text" value="1">
  //       <button>+</button>
  //     </p>
  //     <p class="btns">
  //       <button>加入购物车</button>
  //       <button>立即购买</button>
  //     </p>
  //   </div>
  // `
  let str=""
  str=`<div class="left">
  <div class="more" id="more">
    <div class="show">
        <img src="${res.data.itemInfo.imgContent[0]}">
        <div></div>
    </div>
    <div class="list">`
    res.data.itemInfo.imgContent.forEach((item)=>{
      if(res.data.itemInfo.imgContent.indexOf(item)===0){
        str+=`<img src="${item}" data-enlarge="${item}" data-show="${item}" class="active">`
      }
      else{
        str+=`<img src="${item}" data-enlarge="${item}" data-show="${item}">`
      }
    })
    str+=`
    </div>
    <div class="enlarge">
         <img src="${res.data.itemInfo.imgContent[0]}">
     </div>
 </div> </div>
 <div class="right">
  <div class="sInfo-title">${res.data.itemInfo.title}</div>
   <p class="sInfo-subtitle">${res.data.itemInfo.summary}</p>
   <div class="price">价&nbsp;&nbsp;格<span>${res.data.itemInfo.priceSale}</span></div>
   <div class="top-notice-bar">${res.data.notice.msg}</div>
   <div class="cate">分&nbsp;&nbsp;类`
   res.data.subItems.forEach((item)=>{
    if(goodsId===item.itemId){
      str+=`<a href="./detail" data-id="${item.itemId}" style="background-color:orange;">${item.ctitle}</a>`
    }
    else{
      str+=`<a href="./detail" data-id="${item.itemId}">${item.ctitle}</a>`
    }
  })
  str+=`</div>
      <div class="sInfo-num">数&nbsp;&nbsp;量<span>-</span><span>1</span><span>+</span></div>
      <div class="buy-car"><button>立即购买</button><button>加入购物车</button></div>
    </div>
  
    </div>
    <script src="../js/enlarge.js"></script>
    <script>let e1=new EnlargeBox("#more")</script>`
    box.innerHTML=str
    



//    <div class="cate">分&nbsp;&nbsp;类<a href="#">AAA</a><a href="#">BBB</a></div>
//    <div class="sInfo-num">数&nbsp;&nbsp;量<span>-</span><span>1</span><span>+</span></div>
//    <div class="buy-car"><button>立即购买</button><button>加入购物车</button></div>
//  </div>

//  </div>`

  // box.innerHTML=`<div class="left">
  // <div class="more" id="more">
  //   <div class="show">
  //       <img src="./img/1.jpg">
  //       <div></div>
  //   </div>
  //   <div class="list">
//         <img src="./img/1.small.jpg" data-show="./img/1.jpg" data-enlarge="./img/1.big.jpg" class="active">
//         <img src="./img/2.small.jpg" data-show="./img/2.jpg" data-enlarge="./img/2.big.jpg" >
//     </div>
//     <div class="enlarge">
//         <img src="img/1.big.jpg">
//     </div>
// </div> </div>
    
// <div class="right">
//   <div class="sInfo-title">360智能摄像机小水滴5C 2K高清版AC1P</div>
//   <p class="sInfo-subtitle">300万高清像素 130°人眼广角</p>
//   <div class="price">价&nbsp;&nbsp;格<span>122</span></div>
//   <div class="top-notice-bar">物流公告：受疫情影响，北京、上海、黑龙江、吉林、辽宁、河北、江西、江苏、四川、甘肃、青海、新疆、宁夏回族自治区等部分地区暂缓发货。</div>

//   <div class="cate">分&nbsp;&nbsp;类<a href="#">AAA</a><a href="#">BBB</a></div>
//   <div class="sInfo-num">数&nbsp;&nbsp;量<span>-</span><span>1</span><span>+</span></div>
//   <div class="buy-car"><button>立即购买</button><button>加入购物车</button></div>
// </div>

// </div>`

  // 商品参数是直接给的
  // 注意: 必须在服务器上打开, 才能看到
  // paramsBox.innerHTML = res.info.goods_introduce













  
  
  // document.children
  let e1=new EnlargeBox("#more")
}
// class EnlargeBox{
//   constructor(select){
//       this.select=document.querySelector(select)
//       this.show=this.select.querySelector(".show")
//       this.list=this.select.querySelector(".list")
//       this.enlarge=this.select.querySelector(".enlarge")
//       this.show_width=this.show.clientWidth
//       this.show_height=this.show.clientHeight
//       this.show_boxW=parseInt(window.getComputedStyle(this.show.lastElementChild).width)
//       this.show_boxH=parseInt(window.getComputedStyle(this.show.lastElementChild).height)
//       this.big_imgW = parseInt(window.getComputedStyle(this.enlarge.lastElementChild).width)
//       this.big_imgH = parseInt(window.getComputedStyle(this.enlarge.lastElementChild).height)
//       this.show_box=this.show.querySelector("div")
//       // console.log(this.enlarge.firstElementChild.clientWidth)
//       this.setScale()
//       this.overout()
//       this.showMove()
//       this.changeImg()
//   }
//   setScale(){
//       // console.log(this.big_imgW)
//       this.enlarge_width=this.big_imgW*this.show_boxW/this.show_width+"px"
//       this.enlarge_height=this.big_imgH*this.show_boxH/this.show_height+"px"
//       this.enlarge.style.width=(this.big_imgW*this.show_boxW)/this.show_width+"px"
//       this.enlarge.style.height=(this.big_imgH*this.show_boxH)/this.show_height+"px"
//     //   this.enlarge.style.width=510+"px"
//     //   this.enlarge.style.height=510+"px"
      
//   }
//   showMove(){
//       // console.log("aaa")
//       this.show.addEventListener("mousemove",e => {
//           // this.show_boxW=this.show_box.offsetWidth
//           // this.show_boxH=this.show_box.offsetHeight
//           this.show_box.style.top=e.offsetY-this.show_boxH/2+"px"
//           this.show_box.style.left=e.offsetX-this.show_boxW/2+"px"
//           if(parseInt(this.show_box.style.top)<=0)this.show_box.style.top=0;
//           if(parseInt(this.show_box.style.left)<=0)this.show_box.style.left=0;
//           if(parseInt(this.show_box.style.top)>=(this.show_height-this.show_boxH))this.show_box.style.top=this.show_height-this.show_boxH+"px";
//           if(parseInt(this.show_box.style.left)>=(this.show_width-this.show_boxW))this.show_box.style.left=this.show_width-this.show_boxW+"px"; 
//           this.enlarge.lastElementChild.style.left=-(parseInt(this.show_box.style.left)*this.big_imgW/this.show_width)+"px"
//           this.enlarge.lastElementChild.style.top=-(parseInt(this.show_box.style.top)*this.big_imgW/this.show_width)+"px"
//           // console.log(this.enlarge.lastElementChild.style.left)
//           // console.log(this.big_imgW)
//       })
      
//   }
  
//   overout(){
//       this.show.addEventListener("mouseover",(e) => {
//           this.show_box.style.display="block"
//           this.enlarge.style.display="block"
//           // console.log(this.enlarge.style.display)

//       })
//       this.show.addEventListener("mouseout",() => {
//           this.show_box.style.display="none"
//           this.enlarge.style.display="none"
          
//       })
//   }
//   changeImg(){
//      this.list.addEventListener("click",e=>{
//       //    console.log("aaa")
//          if(e.target.nodeName==="IMG"){
//           //    console.log(e.target)
//           //    console.log(this.show)
//               this.show.querySelector("img").src=e.target.dataset.show
//               // this.show.firstElementChild.src=e.target.dataset.show
//               this.enlarge.firstElementChild.src=e.target.dataset.enlarge
//               for(let i=0;i<this.list.children.length;i++){
//                   this.list.children[i].classList.remove("active")
//               }
//               e.target.classList.add("active")
//               // console.log(this.list.children)
//          }
//      })
//   }
// }









